<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta http-equiv="imagetoolbar" content="no" />
<meta name="viewport"
	content="width=device-width,height=device-height, initial-scale=1.0, user-scalable=no">
	
	<link rel="stylesheet" href="${s.base}/res/pc/css/animate.min.css">
	
	<link rel="stylesheet" href="${s.base}/res/css/icono.min.css">
    <!-- script type="text/javascript" src="${s.base}/res/mobile/js/zepto.min.js"></script -->
	<script type="text/javascript" src="${s.base}/res/pc/js/jquery-1.9.1.min.js"></script>	
	<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.0.0.js "></script>
	
	<script type="text/javascript" src="${s.base}/res/pc/js/fullscreen.js"></script>		
	<script type="text/javascript">
	 CONETXT_PATH = '${s.base}';
	 var CUR={currentState:0,province:""};
		 $(function(){
			 var ck={};
			   
				$.getJSON(CONETXT_PATH+"/base/provincejson" ,function(data){
				 
					$.each(data,function(){
						var _this=this;
						
						 $('<li class="appitem" corpId='+_this.corpId+'  province='+_this.province+'  url='+_this.url+'> <div class="codeBorder">' 
						  +'<img class="codeImg" alt="登陆二维码" width=48 height=48 src="'+CONETXT_PATH+'/res/images/corpimg/'+_this.corpicon+'" >'
						  +'<span>'+_this.provincename+'</span> </div> </li>').appendTo( $(".corplist ul"));
						
					});
					
					 if($(".appitem").length==1){
						 $(".appitem").addClass("select");
			        		showCode();
			         }
	
			           if($(".appitem").length<6){
			             	$(".appitem").width(776)
			           } else if($(".appitem").length>15){
			            	$(".appitem").width(246)
			           }else{
			              	$(".appitem").width(380)
			           }
					
				});

        	
 
		  function  showCode(){
		  	$('#codearea').addClass('animated bounceInDown');
                  setTimeout(function(){
			        $('#codearea').removeClass('bounceInDown');
			      }, 700);

               $('#codearea').show();
               $("#processDesc").html("使用微信扫描上面的二维码！");
               
               $(".headtitle>h1").html("通过微信扫描屏幕中的二维码登录");
               
               var province=$(".appitem.select").attr("province");
               $.ajax({
                   url: "${s.base}/login/codeImg",
                  // data:{province:$(".codeBorder.select").attr("province"),token:''},
                   data:"province="+province,
                   type: "GET",
                   dataType: 'json',
                //   headers:{'Content-Type':'image/png','X-Requested-With':'XMLHttpRequest'},
                   processData: false,
                   success: function(result){
                	   ck.time=result.time;
                	   ck.province=province;
                	   ck.checking=true;
                	    $("#cdimg").attr("src",'data:image/png;base64,'+result.img);
                	   // checkForResult(true,province,result.state);
                	    CUR.currentState=result.state;
                	    CUR.province=result.province;
                   },
                   error:function(XMLResponse){
                	//   alert(XMLResponse.responseText)
                    //   $("#cdimg").attr("src",'data:image/png;base64,'+XMLResponse.responseText);   
                   }
              }); 
          
		  }
		  
	
 
		  
		  $("body").on("click",".appitem" ,function(){

		  		var _this=$(this);
		  		$(".appitem.select").removeClass("select");
		  		_this.addClass("select");
                showCode();
		  });
		  
		  
		  $("#backicon").on("click",function(){

               $(".headtitle>h1").html("点击下图标签，选择登录区域");
                $('#codearea').addClass('animated bounceOutUp');
                 setTimeout(function(){
                	 
			          $('#codearea').removeClass('bounceOutUp');
			          $('#codearea').hide();
			          
			      }, 700);
                 
                 ck.checking=false;

		  });

		  $(window).scroll( function(e,b,c){
        
		  });
		 
		  
		  //判断当前浏览器是否支持WebSocket
		    if ('WebSocket' in window) {
		        websocket = new WebSocket("ws://"+ window.location.host+CONETXT_PATH+"/websocket");
		    }
		    else {
		        alert('暂不支持该浏览器，请使用高版本浏览器！')
		    }

		    //连接发生错误的回调方法
		    websocket.onerror = function () {
		    	$("#processDesc").html("暂不支持该浏览器，请使用高版本浏览器！");
		        //setMessageInnerHTML("WebSocket连接发生错误");
		    };

		    //连接成功建立的回调方法
		    websocket.onopen = function () {
		    	$("#processDesc").html("使用微信扫描上面的二维码！");
		       // setMessageInnerHTML("WebSocket连接成功");
		    }

		    //接收到消息的回调方法
		    websocket.onmessage = function (event) {
		      //  setMessageInnerHTML(event.data);
		       console.dir(event.data);
		       var data= eval ("("+ event.data +")"); ;
		         //type: "login", state: "ss", message: "codeOK"
		       if( CUR.currentState==data.state){
		    	 
		    	   $("#processDesc").html(data.message);
		    	   //手机端验证成 ，跳转到首页
		    	   if(data.result=="confirmOk"){
		    		   $.ajax({
		                   url: "${s.base}/login/toIndex",
		                   data:{province:data.province, userid:data.userid},
		                //   data:"province="+province,
		                   type: "GET",
		                   dataType: 'json',
 
		                   success: function(result){
		                	   
								//显示保存结果        
								if(result.success==true){
									 var src="${s.base}/pcindex" ;//location.href实现客户端页面的跳转
									  location.href = src;
									 // openwin_full(src);
								//	 window.open (src,'newwindow','width='+(window.screen.availWidth-10)+',height='+(window.screen.availHeight-30)+ ',top=0,left=0,toolbar=no,menubar=no,scrollbars=no, resizable=no,location=no, status=no')
		 
		                	   }
		                 
		                   },
		                   error:function(XMLResponse){
    
		                   }
		              }); 
		    		   
		    	   }
		       }
		       
		      
		    }

		    //连接关闭的回调方法
		    websocket.onclose = function () {
		     //   setMessageInnerHTML("WebSocket连接关闭");
		    }

		    //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
		    window.onbeforeunload = function () {
		        closeWebSocket();
		    }

		    //将消息显示在网页上
		    function setMessageInnerHTML(innerHTML) {
		        document.getElementById('message').innerHTML += innerHTML + '<br/>';
		    }

		    //关闭WebSocket连接
		    function closeWebSocket() {
		        websocket.close();
		    }

		    function sendJSON(msg){
		    	websocket.send(JSON.stringify(msg));
		    }
		    //发送消息
		    function send() {
		        var message = document.getElementById('text').value;
		        websocket.send(message);
		    }

		 });
 </script>

<title>二维码登陆验证</title>
<style>
* {
	padding: 0px;
	margin: 0px;
	 
}
html {
	background: rgba(0, 81, 151, 1);	/*	background: rgba(21, 72, 153, 1);  rgba(2, 82, 84, 1)*/
	color:white;
}
body {
 
	color:white;	 
}

#loginArea {
	width: 100%;
	height: 100%;
	margin: 0px auto;
	text-align: center;
}

#codeImg {
	border: 1px solid #aaa;
	border-radius: 2px;
}

#title {
	width: 100%;
	line-height: 30px;
	text-align: center;
}

#content {
	padding: 30px;
	color: white;
	text-align: center;
}

#content p {
	margin: 3px;
}
.appitem{
	 width: 360px;
	 height: 66px;
	 float: left;
	 margin-top: 10px;
    font-size: 34px;
    line-height: 66px;
    padding: 8px;
    cursor:pointer;
}
.codeBorder {
       width: 100%;
    /* margin: 0 auto; */
    margin-left: 10px;
    border-radius: 10px;
    border: 1px solid rgba(247, 247, 247, 0.2);
    box-shadow: 1px 5px 0px 2px rgba(0, 0, 0, 0.22);
  
}
.codeBorder:first-child{
 /* border-top-left-radius:66px; 
 	      border-top-right-radius: 66px; 
       
          border-bottom: 1px solid rgba(247, 247, 247, 0.2);	 
          box-shadow: 0px -5px 1px 3px rgba(0, 0, 0, 0.37); */
}
.codeBorder:last-child{
	    
	   /*  border-bottom-left-radius:66px; 
	     border-bottom-right-radius: 66px; 
	  border-top:  1px solid rgba(247, 247, 247, 0.2);	*/
}
.appitem.select .codeBorder{
    background-color: rgba(0, 0, 0, 0.3);
    /* padding: 8px; */
    box-shadow: none;
    /* margin-top: 12px; */
}
.codeBorder img {
   padding: 8px
}

.button {
	width: 200px;
	height: 30px;
	margin: 20px auto;
	background: linear-gradient(to bottom, rgba(122, 255, 144, 0.91),
		rgba(55, 171, 75, 0.8), rgba(74, 193, 94, 0.5));
	border: 1px solid #928888;
	box-shadow: 1px 2px 2px #222;
	border-radius: 5px;
	line-height: 30px;
	cursor: pointer;
}

.line {
	width: 100%;
	height: 0px;
	border-top: 1px solid #FFF;
	border-bottom: 1px solid #0A0A0A;
	/*box-shadow: 0px 1px 0px #9A9999;*/
	margin-top: 10px;
}

.copy, .name {
	height: 30px;
	width: 100%;
	line-height: 30px;
	font-size:20px;
}
.apparea{

    overflow: hidden;
    position:absolute;
    top:50px;
    bottom: 100px;
    width:100%;
   
}
.apparea .name {
	text-align:center;
	color:white;
}
.apparea .corplist{
	  width: 820px;
      margin: 0 auto;
     
      	 height: inherit;
     overflow: auto;
}
ul li{
	list-style-type: none;
}
.codeBorder .codeImg{
	 float:left;
}
.floor {
	 height:100px;
 
	 color: white;
	 text-align: center;
	 border-top: 1px solid rgba(255, 255, 255, 0.22);
}

.floor{
	margin: 3px;
}
#floor_btn{
    z-index: 2;
    position: fixed;
    bottom: -5px;
    width: 100%;
    box-shadow: 0px -5px 3px rgba(0, 0, 0, 0.12);
    border: 1px solid rgba(253, 253, 253, 0.17);
}
#floor_btn .btn_area{
	width:60%;
	margin:0 auto
}
.header{
	 
	 top:0px;
	 width:100%;
	 height:50px;
 
	 border-bottom: 1px solid rgba(255, 255, 255, 0.22);
	     z-index: 2;
}
#hdused{
       position: fixed;
       box-shadow: 1px 5px 5px rgba(0, 0, 0, 0.14);
}
.headtitle{
	width:100%;
}
.appareaContent{
   position: absolute;
   height:100%;
   width:100%;
 
   
}
#codearea{ 
	display:none;background: #005197;z-index:1; 

}
/* 滚动条*/
.scroll{
	 height: inherit;
     overflow: auto;
    
}
.scroll::-webkit-scrollbar {
 width: 8px;
 height: 8px;
}
.scroll::-webkit-scrollbar-track {
 background-color:rgba(255, 250, 250, 0.17);
 -webkit-border-radius: 2em;
 -moz-border-radius: 2em;
 border-radius:2em;
}
.scroll::-webkit-scrollbar-thumb {
 background-color:rgba(251, 251, 251, 0.51);
 -webkit-border-radius: 2em;
 -moz-border-radius: 2em;
 border-radius:2em;
}
.codeimg {
	height:100%;
	width:800px;
	margin:0 auto;
}
.imgdesc{
	 
	height:120px;
	line-height: 120px;
}
.imgdesc #backicon {
	 float:right;
	 margin-top:20px;
}
 
.imgarea{

    background: white;
    width: 380px;
    margin: 0 auto;
    padding: 50px 0px;
    border-radius: 5px;
    box-shadow: 2px 5px 0px 5px rgba(0, 0, 0, 0.26);
}
#backicon:hover{
     color:green;
}
#processDesc{
color:black;
}
#fullscr{
position: fixed;
    top: 20px;
    right: 20px;
    cursor: pointer;
    background: transparent;
    border: none;
    border: none;
}
 
</style>
 


</head>
<body>
	<div id="loginArea">
		<div class="header" id="hdused">
			<div class="headtitle">
				<h1>  点击下图标签，选择登录区域 </h1>
				<botton  id="fullscr"   type="button"> 全屏 </botton>
			</div>
		</div>
   
            <div class="apparea">
            	<div class="appareaContent"  id="codearea">
            		 <div class="codeimg">
            		 	<div class="imgdesc"><i class="icono-caretUpSquare" id="backicon"></i></div>
	            		   <div class="imgarea">
	            		 	     <img  id="cdimg" width=320  height=320 >
	            		 	     <div id="processDesc"></div>
	            		   </div>
            		 </div>

            	</div>
	            <div class="appareaContent">
	            <div class="corplist scroll">
			              <ul>
								 
						  </ul>
				 </div>
				</div>
			</div> 
		 
 
		<div class="floor" id="floor_btn">
			<div class="btn_area"> 
				<div class="copy"><a href="http://www.dongdiankeji.com" >重庆东电科技有限公司</a><p> </p></div>
				<div class="line"></div>
				 
				 
		    </div>
		</div>

	</div>
	
</body>
</html>